<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义指令</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.mystyle{
  width:600px;
  height:300px;
  border:1px solid black;
  background-color:pink;
  }
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-focus>
			<div class="mystyle" v-color='bk'></div>
		</div>
		<script>
			// Vue.directive('focus', {
			// 	inserted: function(el) {
			// 		//为元素获得焦点
			// 		el.focus();
			// 	}
			// });

			// Vue.directive('color', {
			// 	//binding是自定义指令中的一个参数,通过value属性可以获得指令的参数
			// 	bind: function(el, binding) {
			// 		console.log(binding);
			// 		el.style.backgroundColor = binding.value.color;
			// 	}
			// })
			//1. 实例化一个Vue的实例
			let vm = new Vue({
				el: '#app',
				data: {
					bk: {
						color: 'blue'
					}
				},
				//定义局部指令
				directives: {
					//属性名就是指令的名称
					color: {
						bind: function(el, binding) {
							console.log(binding);
							el.style.backgroundColor = binding.value.color;
						}
					},
					focus: {
						inserted: function(el) {
							//为元素获得焦点
							el.focus();
						}
					}
				}
			});
		</script>
	</body>
</html>
